<template>
	<view class="container">
		<view class="check-img">
			<!-- 视频组件 -->
	<!-- #ifdef APP -->
	
			<camera device-position="back" class="img" flash="off" @error="error" style="width: 100vw; height: 60vh;">
			</camera>
	<!-- #endif -->

			<!-- 对准框 -->
			<!-- <div class="camera2" :style="{ 'background-image': `url(${kuankuan})` }"></div> -->

			<!-- 扫描动画 -->
			<view class="check-await"></view>
			<image :src="src" mode="widthFix" style="width: 500rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// kuankuan: this.$store.state.baseUrl + '/images_fjfw/kuankuan.png',
				timer: null,
				src:''
			}
		},
		onLoad(option) {},
		onShow() {
			this.changeAvatar()
		},
		mounted() {},
		components: {},
		filters: {},
		watch: {},
		computed: {},
		methods: {
			//关闭抓拍
			stopCamera() {
				clearInterval(this.timer);
				this.timer = null;
			},

			//调用摄像头
			changeAvatar() {
				let that = this;
				const cameraContext = uni.createCameraContext();
				this.timer = setTimeout(() => {
					cameraContext.takePhoto({
						quality: 'high',
						success: res => {
							const src = res.tempImagePath
							that.src = src
							// console.log(src, 'res.tempImagePath');
							// const base64_dt = uni.getFileSystemManager().readFileSync(src, 'base64')
							// const fileName_dt = src.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
							// const base64_img = 'data:image/' + fileName_dt + ';base64,' + base64_dt
							
							// console.log(base64_img)

						},
						fail: err => {
							console.error('拍照失败', err);
						}
					});
				}, 3000);
			}

		},
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
		width: 100%;
		height: 100vh;
	}

	.camera2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-43%, -50%);
		width: 449.89rpx;
		height: 389.64rpx;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.check-await {
		position: absolute;
		width: 100vw;
		height: 40px;
		filter: blur(0px);
		margin: auto;
		// left: 0;
		// right: 0;
		transform: translateY(-1000px);
		animation: move 2s linear infinite;
	}

	@keyframes move {
		0% {
			transform: translateY(-520px);
			background: linear-gradient(180deg, rgba(84, 181, 105, 0) 0%, #10ff44 100%);
		}

		100% {
			transform: translateY(-45px);
			background: linear-gradient(180deg, rgba(84, 181, 105, 0) 0%, #10ff44 100%);
		}
	}

	.check-img {
		position: relative;

	}

	.check-img .img {
		// width: 320px;
		// height: 320px;
		// border-radius: 5px;
		background: linear-gradient(180deg, #f0f0f2 0%, #d8dce0 100%);
	}
</style>